<template>
  <div class="recommend">
    <better-scroll :data="playlist" class="recommend-content">
      <div>
        <recommend-slider :list="this.slider"></recommend-slider>
        <recommend-playlist :list="this.playlist"></recommend-playlist>
      </div>
    </better-scroll>
  </div>
</template>

<script>
import {getRecommend, getDiscList} from 'api/recommend'
import {ERR_OK} from 'api/config'
import RecommendSlider from './slider/Slider.vue'
import RecommendPlaylist from './playlist/PlayList.vue'
import BetterScroll from '@/components/scroll/Scroll'

export default {
  name: 'Recommend',
  data () {
    return {
      slider: [],
      playlist: []
    }
  },
  components: {
    RecommendSlider,
    RecommendPlaylist,
    BetterScroll
  },
  created () {
    this._getRecommend()
    this._getDiscList()
  },
  methods: {
    _getRecommend () {
      getRecommend().then((res) => {
        if (res.code === ERR_OK) {
          this.slider = res.data.slider
        }
      })
    },
    _getDiscList () {
      getDiscList().then((res) => {
        if (res.code === ERR_OK) {
          this.playlist = res.data.list
        }
      })
    }
  }
}

</script>
<style lang='stylus' scoped>
.recommend
  position fixed
  top 1.72rem
  bottom 0
  width 100%
  .recommend-content
    height 100%
    overflow hidden
</style>
